import { Button, Card, Checkbox, Form, List, Modal, Select } from "antd";
import { CorrectnessRulesConfig, RuleLevel } from "./config";
import { CorrectnessRuleInfo, CorrectnessRuleList } from "./rules";
import { useState } from "react";
import { min_app_shell } from '@linksaas-minapp/api';

interface SelectRuleModalProps {
    correctness?: CorrectnessRulesConfig
    onCancel: () => void;
    onSelect: (rule: CorrectnessRuleInfo) => void;
}

function SelectRuleModal(props: SelectRuleModalProps) {
    const ruleList = CorrectnessRuleList.filter(rule => !(props.correctness !== undefined && props.correctness[rule.id] !== undefined));

    return (
        <Modal open title="选择规则" footer={null} onCancel={e => {
            e.stopPropagation();
            e.preventDefault();
            props.onCancel();
        }} bodyStyle={{ maxHeight: "calc(100vh - 300px)", overflowY: "scroll" }}>
            <List rowKey="id" dataSource={ruleList} renderItem={rule => (
                <List.Item>
                    <Card title={<h3>{rule.id}{rule.recommend ? "(推荐规则)" : ""}</h3>}
                        style={{ width: "100%" }}
                        extra={
                            <Button type="link" onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                props.onSelect(rule);
                            }}>选择规则</Button>
                        }>
                        <p>{rule.descCn}</p>
                        <p>{rule.descEn}</p>
                    </Card>
                </List.Item>
            )} />
        </Modal>
    );
}


interface CorrectnessProps {
    correctness?: CorrectnessRulesConfig;
    onChange: (correctness: CorrectnessRulesConfig) => void;
}

export default function Correctness(props: CorrectnessProps) {
    const [showModal, setShowModal] = useState(false);

    return (
        <>
        <Form>
            <Form.Item label="使用推荐规则">
                <Checkbox checked={props.correctness?.recommended ?? false} onChange={e => {
                    e.stopPropagation();
                    let correctness = props.correctness;
                    if (correctness == undefined) {
                        correctness = {};
                    }
                    correctness.recommended = e.target.checked;
                    props.onChange(correctness);
                }} />
            </Form.Item>
            <Form.Item label="使用全部规则">
                <Checkbox checked={props.correctness?.all ?? false} onChange={e => {
                    e.stopPropagation();
                    let correctness = props.correctness;
                    if (correctness == undefined) {
                        correctness = {};
                    }
                    correctness.all = e.target.checked;
                    props.onChange(correctness);
                }} />
            </Form.Item>
        </Form>
        <Card bordered={false} title="规则列表" extra={<Button type="primary" onClick={e => {
            e.stopPropagation();
            e.preventDefault();
            setShowModal(true);
        }}>增加规则</Button>}>
            {CorrectnessRuleList.map(rule => (
                <>
                    {(props.correctness ?? {})[rule.id] !== undefined && (
                        <Card title={<span>{rule.id}{rule.recommend ? "(推荐规则)" : ""}(<a onClick={e=>{
                            e.stopPropagation();
                            e.preventDefault();
                            min_app_shell.openBrowser(rule.url);
                        }}>规则页面</a>)</span>} extra={
                            <Button type="link" danger onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                if (props.correctness !== undefined) {
                                    delete props.correctness[rule.id];
                                    props.onChange(props.correctness);
                                }
                            }}>移除规则</Button>
                        } style={{ marginBottom: "10px" }}>
                            <p>{rule.descCn}</p>
                            <p>{rule.descEn}</p>
                            <Form>
                                <Form.Item label="警告级别">
                                    <Select style={{ width: "100px" }} value={(props.correctness ?? {})[rule.id] as RuleLevel}
                                        onChange={value => {
                                            let correctness = props.correctness;
                                            if (correctness == undefined) {
                                                correctness = {};
                                            }
                                            if (rule.id !== "recommended" && rule.id !== "all") {
                                                correctness[rule.id] = value;
                                            }
                                            props.onChange(correctness);
                                        }}>
                                        <Select.Option value="off">off</Select.Option>
                                        <Select.Option value="warn">warn</Select.Option>
                                        <Select.Option value="error">error</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Form>
                        </Card>
                    )}
                </>
            ))}
        </Card>
        {showModal == true && (
            <SelectRuleModal correctness={props.correctness}
                onCancel={() => setShowModal(false)}
                onSelect={rule => {
                    setShowModal(false);
                    let correctness = props.correctness;
                    if (correctness == undefined) {
                        correctness = {};
                    }
                    if (rule.id !== "recommended" && rule.id !== "all") {
                        correctness[rule.id] = "warn";
                    }
                    props.onChange(correctness);
                }} />
        )}
    </>
    );
}